<template>
	<div v-loading="loading">
		<div v-if="tableData.length" class="order">
			<div class="order-header" v-if="venueMap[type]">
				<div>所属场馆: {{ venueMap[type].venueName || '-' }}</div>
				<div>
					有效投注重算调整:
					<span
						:style="
							handleNumberColor(
								venueMap[type].validBetAmountRecal
							)
						"
					>
						{{
							handleNumber(
								'USDT',
								venueMap[type].validBetAmountRecal
							)
						}}
					</span>
				</div>
				<div>
					应发会员返水重算调整:
					<span
						:style="
							handleNumberColor(venueMap[type].rebateAmountRecal)
						"
					>
						{{
							handleNumber(
								'USDT',
								venueMap[type].rebateAmountRecal
							)
						}}
					</span>
				</div>
				<div>
					实发会员返水重算调整:
					<span
						:style="
							handleNumberColor(venueMap[type].rebateRealAmount)
						"
					>
						{{
							handleNumber(
								'USDT',
								venueMap[type].rebateRealAmount
							)
						}}
					</span>
				</div>
			</div>
			<div v-for="(item, index) in tableData" :key="index">
				<div class="order-list" v-if="item.memberRecalDTOList.length">
					<div
						v-for="(item1, index1) in item.memberRecalDTOList"
						:key="index1"
					>
						<Table :tableData="item1.recordVoList" />
					</div>
				</div>
				<div class="order-list" v-else>
					<Table :tableData="[]" />
				</div>
			</div>
			<!-- 分页 -->
			<el-pagination
				v-show="!!total"
				:current-page.sync="pageNum"
				class="pagination"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="pageSize"
				:page-sizes="pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</div>
	</div>
</template>

<script>
import list from '@/mixins/list'
import Table from './table.vue'
export default {
  components: {
    Table
  },
  mixins: [list],
  props: {
    rowData: {
      type: Object,
      default: () => { }
    },
    type: {
      type: String,
      default: ''
    },
    venueMap: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      tableData: []
    }
  },
  methods: {
    loadData() {
      let params = {
        memberId: this.rowData.memberId,
        recalType: this.rowData.changeStatus,
        reportDate: this.rowData.reportDate,
        startDate: this.rowData.reportDate,
        endDate: this.rowData.reportDate,
        venueCode: this.type
      }
      params = this.getParams(params)
      this.loading = true
      this.$api.reportRecalMemberOrderRecalList(params).then(res => {
        this.tableData = res.data.record || []
        this.total = res.data.totalRecord || 0
        this.loading = false
        this.$emit('finish', {
          type: this.type,
          tableData: this.tableData,
          isFinish: true
        })
      }).catch(() => {
        this.loading = false
        this.$emit('finish', {
          type: this.type,
          tableData: [],
          isFinish: true
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.order{
    border: 1px solid #EBEEF5;
    margin: 15px 0 30px;
	&:last-child{
		margin-bottom: 0;
	}
    .order-header{
        display: flex;
        background-color: rgb(239, 239, 239);
        height: 40px;
        align-items: center;
        > div{
            flex: 1;
            align-items: center;
            justify-content: center;
            display: flex;
       }
    }

    .order-list{
        padding: 10px;
    }
	.success {
		color: #70B603;
	}
	.error{
		color: #D9001B;
	}
	.pagination{
		display: flex;
		justify-content: flex-end;
		padding: 10px;
	}
}

</style>
